<template>
  <el-card>
    <el-button type="primary" icon="Plus" @click="addroles">
      新增菜单
    </el-button>
  </el-card>
  <el-card style="margin: 10px 0px">
    <el-table border :data="menuList" class="table">
      <el-table-column
        label="序号"
        type="index"
        align="center"
        width="80px"
      ></el-table-column>
      <el-table-column
        label="菜单名称"
        prop="mName"
        align="center"
      ></el-table-column>
      <el-table-column
        label="菜单值"
        prop="mValue"
        align="center"
      ></el-table-column>
      <el-table-column label="创建时间" align="center">
        <template #default="{ row }">
          {{ row.createAt.split("T")[0] }}
        </template>
      </el-table-column>
      <el-table-column label="修改时间" align="center">
        <template #default="{ row }">
          {{ row.updateAt.split("T")[0] }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button
            type="info"
            size="small"
            icon="edit"
            @click="updateMenu(row)"
            >修改菜单</el-button
          >
        
          <el-popconfirm :title="`你确定删除${row.mName}吗？`" @confirm="deleteMenu(row._id)">
            <template #reference>
              <el-button type="danger" size="small" icon="delete"
            >删除菜单</el-button
          >
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="page"
      v-model:current-page="pageNo"
      v-model:page-size="pageSzie"
      :page-sizes="[5, 10, 15, 20]"
      background
      layout=" prev, pager, next, jumper,total, sizes,"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
  <AddOrUpdateVue
    v-model="isShow"
    :getMenuList="getMenuList"
    :updateInfo="updateInfo"
  ></AddOrUpdateVue>
</template>

<script setup>
defineOptions({
  name: "Menu",
});
import { ref, onMounted } from "vue";
import AddOrUpdateVue from "./addOrUpdate/index.vue";
import { getMenuListAPI , deleteMenuAPI } from "@/api/menu";
import { ElMessage } from "element-plus";
let menuList = ref([]);
let total = ref(0);
let pageNo = ref(1);
let pageSzie = ref(5);
let isShow = ref(false);
let updateInfo = ref({});
onMounted(() => {
  getMenuList();
});
//获取菜单列表
const getMenuList = async () => {
  //发送请求
  let result = await getMenuListAPI(pageNo.value, pageSzie.value);
  menuList.value = result.data;
  total.value = result.total;
};

const handleSizeChange = () => {
  getMenuList();
};
const handleCurrentChange = () => {
  getMenuList();
};
const addroles = () => {
  isShow.value = true;
};
const updateMenu = (row) => {
  updateInfo.value = row;
  isShow.value = true;
};
const deleteMenu = async (id) => {
  await deleteMenuAPI(id);
  getMenuList();
  ElMessage.success("删除成功");
}
</script>

<style lang="scss" scoped>
.table {
  margin: 10px 0px;
}
.page {
  display: flex;
  justify-content: center;
}
</style>
